import { defineComponent, ref, reactive } from "vue";
import TablePage from "@/components/TablePage/TablePage";
import { tablesInterface } from "@/common/interface/table.interface";
import MusicIosVersionRecordService from "./index.service";
import styles from "./index.module.less";
import Add from "./Add/Add";
import { message, Modal } from "ant-design-vue";
import to from "await-to-js";
import { MobileOutlined, TabletOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  name: "List",
  setup() {
    const tablePageRef = ref(null as any);
    const musicIosVersionRecordService = new MusicIosVersionRecordService();
    // 表格定义
    const tables = reactive({
      list: [
        {
          title: "ios版本管理",
          rowKey: "id",
          columns: [
            {
              title: "ID",
              dataIndex: "id",
              align: "center",
              width: "80px",
            },
            {
              title: "设备类型",
              dataIndex: "platform",
              align: "center",
              width: "180px",
            },
            {
              title: "版本名",
              dataIndex: "versionName",
              align: "center",
              width: "220px",
            },
            {
              title: "版本号",
              dataIndex: "versionCode",
              align: "center",
              width: "220px",
            },
            {
              title: "状态",
              dataIndex: "status",
              align: "center",
              width: "180px",
            },
            {
              title: "备注",
              dataIndex: "remark",
              align: "center",
              width: "280px",
            },
            {
              title: "创建时间",
              dataIndex: "createTime",
              align: "center",
              width: "280px",
            },
            {
              title: "修改时间",
              dataIndex: "updateTime",
              align: "center",
              width: "280px",
            }
          ],
          toolbar: {
            left: ["refresh", "add"],
            right: ["filter", "search"],
            add: {
              permissions: "music:iosVersionRecord:add",
              handler: () => {
                const addPopupRef = tablePageRef.value.getPopup("addRef");
                addPopupRef.value.open({ type: 'add' });
              }
            },
          },
          searchForm: {
            versionName: {
              type: "input",
              label: "版本名",
              attrs: { placeholder: "版本名", allowClear: true },
            },
            versionCode: {
              type: "input",
              label: "版本号",
              attrs: { placeholder: "版本号", allowClear: true },
            },
            status: {
              type: "select",
              label: "状态",
              attrs: { placeholder: "状态", allowClear: true },
              datas: [{ label: "审核通过", value: 0 }, { label: "审核中", value: 1 }],
            },
          },
          service: musicIosVersionRecordService,
          operation: ({ record }) => [
            {
              type: "custom",
              permissions: "music:iosVersionRecord:pass",
              el: () => <a-button size="small" type="primary">审核通过</a-button>,
              clickHandler: () => {
                Modal.confirm({
                  title: "提示",
                  content: "确认审核通过?",
                  onOk: async () => {
                    const [err, res] = await to(musicIosVersionRecordService.pass(record.id));
                    if (!err) {
                      message.success("审核成功!");
                      tablePageRef.value.reload();
                    }
                  }
                })
              }
            },
            {
              type: "edit",
              permissions: "music:iosVersionRecord:edit",
              clickHandler: () => {
                const addPopupRef = tablePageRef.value.getPopup("addRef");
                addPopupRef.value.open({ type: 'edit', id: record.id });
              }
            },
            {
              type: "delete",
              permissions: "music:iosVersionRecord:delete",
              clickHandler: "delete",
            },
          ],
          bodyCell: ({ text, record, index, column }) => {
            if (column.dataIndex === "platform") {
              return <>
                <span class={styles.platform}>
                  {
                    text?.toString() === "0" && <>
                      <TabletOutlined class={styles.platformIcon} />iPad
                    </>
                  }
                  {
                    text?.toString() === "1" && <>
                      <MobileOutlined class={styles.platformIcon} />iPhone
                    </>
                  }
                </span>
              </>
            }
            if (column.dataIndex === "status") {
              return <>
                <span class={[styles.StatusTag, text?.toString() === '1' && styles.info]}>
                  {text?.toString() === '0' ? "审核通过" : "审核中"}
                </span>
              </>
            }
          },
          popups: [
            {
              ref: "addRef",
              dom: () => <Add onChange={() => { tablePageRef.value.reload() }} />,
            }
          ],
          pagination: true,
          tableSourceFormat: {
            data: 'rows',
            pageSize: 'pageSize',
            current: 'pageNum',
          },
        }
      ],
    } as tablesInterface)
    // 配置项
    const config = reactive({
      table: tables.list[0],
    })
    return () => (
      <TablePage ref={tablePageRef} config={config} />
    )
  }
})